<template>
    <div>
        <h3>{{ title }}</h3>
        <p>在 2.x 中，自定义组件的数据双向绑定有两种类型：</p> 
        <p>第一：在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件</p>
        <p>第二：:val.sync 修饰符，相当于传递 val prop 并接收抛出的 update:val 事件</p>
        <p>在 3.x 中，统一为，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件</p>
        <div>
            <label>姓名：</label>
            <input
                :value="modelValue"
                @input="$emit('update:modelValue', $event.target.value)"
                placeholder="请输入姓名"
            />
        </div>
        <div>
            <label>年龄：</label>
            <input
                :value="userage"
                @input="$emit('update:userage', $event.target.value)"
                placeholder="请输入年龄"
            />
        </div>
    </div>
</template>

<script>

export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        modelValue: {
            type: String,
            default: ''
        },
        userage: {
            type: Number,
            default: 0
        }

    },
    emits: ['update:modelValue']
}
</script>

<style lang="scss" scoped>
</style>